<template>
	<view class="zh-u-date">
		<picker :mode="props.mode" :value="props.date" :start="startDate" :end="endDate" @change="bindDateChange">
			<view class="date-text">{{props.date}}</view>
		</picker>
	</view>
</template>

<script setup lang="ts">
	import { computed } from 'vue';

	const props = defineProps<{
		mode: string
		date: string
	}>()
	
	const startDate = computed(() => getDate('start'))
	const endDate = computed(() => getDate('end'))
	
	const emit = defineEmits(['change'])
	
	const bindDateChange = (e:any) => {
		console.log(e)
		emit('change')
	}
	
	const getDate = (type:string) => {
		const date = new Date();
		let year:any = date.getFullYear()
		let month:any = date.getMonth() + 1
		let day:any = date.getDate()

		if (type === 'start') {
			year = year - 60
		} else if (type === 'end') {
			year = year + 2
		}
		month = month > 9 ? month : '0' + month
		day = day > 9 ? day : '0' + day
		return `${year}-${month}-${day}`
	}
</script>

<style lang="scss" scoped>
	.zh-u-date {
		.date-text {
			
		}
	}
</style>